<template>
  <div class="box">
    <div class="header">
      <p>主题切换</p>
      <div>
        <el-select v-model="currentSkinName"
                   style="width: 120px"
                   placeholder="请选择"
                   @change="switchTheme">
          <el-option v-for="(item,index) in Object.keys(themeColorObj)"
                     :key="index"
                     :label="themeColorObj[item].title"
                     :value="item">
          </el-option>
        </el-select>
      </div>

    </div>
    <el-scrollbar style="height:92vh">
      <el-card class="container">
        <StylePreview></StylePreview>
      </el-card>
    </el-scrollbar>
  </div>
</template>

<script>
import themes from '@/utils/themes'
import {colorMix} from "@/utils/tool"
import {defineAsyncComponent} from 'vue'

export default {
  name: "Theme",
  components: {
    'StylePreview': defineAsyncComponent(() => import('@/components/stylePreview'))
  },
  data() {
    return {
      currentSkinName: 'darkTheme',
      themeColorObj: {
        defaultTheme: {
          title: '浅色主题'
        },
        darkTheme: {
          title: '深色主题'
        }
      }
    };
  },
  mounted() {
    this.switchTheme()
  },
  methods: {
    switchTheme(type) {
      // 根据不同的主题类型 获取不同主题数据
      // themes 对象包含 defaultTheme、darkTheme 两个属性即默认主题与深色主题
      type = type || 'darkTheme'
      const colorObj = themes[type]

      // 获取基本色色阶
      // colorMix是一个函数
      for (let i = 1; i < 10; i += 1) {
        colorObj[`--el-color-primary-light-${10 - i}`] = colorMix(colorObj['--el-color-white'], colorObj['--el-color-primary'], i * 0.1)
      }

      // 设置css 变量
      Object.keys(colorObj).map(item => {
        document.documentElement.style.setProperty(item, colorObj[item])
      })
    },

    test() {
      let data = {
        "$--color-primary": "#1B95F8",
        "$--color-info": "#7B88A9",
        "$--background-color-base": "#01305F",
        "$--color-white": "#1B3651",
        "$--color-black": "#012447",
        "$--color-text-primary": "#FFFFFF",
        "$--color-text-regular": "#F9F9F9",
        "$--color-text-placeholder": "#E4E2E2",
        "$--color-text-secondary": "#EEEEEE",
        "$--border-color-base": "#2590F9",
        "$--border-color-light": "#388DE0",
        "$--border-color-lighter": "#58A9F5",
        "$--border-color-extra-light": "#86B3F9"
      }

      let dataObj = {}
      Object.keys(data).map(item => {
        let key = item.replace("$--", '--el-')
        dataObj[key] = data[item]
      })
      console.log(dataObj)
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: var(--el-background-color-base);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2vw;
    height: 7vh;
    font-size: 30px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-color-black);
  }

  .container {
    margin: .5vw 1vh;
    width: 99vw;
  }
}
</style>
